<template>
  <div class="ren-region">
  <el-input v-model="showName" :placeholder="placeholder" @focus="treeDialog">
    <el-button slot="append" icon="el-icon-search" @click="treeDialog"></el-button>
  </el-input>
  <el-input :value="value" style="display: none"></el-input>
  <el-dialog v-model="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form size="small" :inline="true">
      <el-form-item label="关键字：">
        <el-input v-model="filterText"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="default">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tree
      class="filter-tree"
      :data="dataList"
      :default-expanded-keys="expandedKeys"
      :props="{ label: 'name', children: 'children' }"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :highlight-current="true"
      node-key="id"
      ref="tree">
    </el-tree>
    <template slot="footer">
      <el-button type="default" @click="cancelHandle()" size="small">取消</el-button>
      <el-button type="info" @click="clearHandle()" size="small">清除</el-button>
      <el-button type="primary" @click="commitHandle()" size="small">确定</el-button>
    </template>
  </el-dialog>
  </div>
</template>
<style lang="scss">
.ren-region {
    .filter-tree {
        max-height: 230px;
        overflow: auto;
    }
    .el-dialog__body {
        padding: 0px 0px 0px 20px;
    }
    .el-dialog__footer {
        padding: 10px 20px 8px 20px;
    }
}
</style>
<script setup>
import {treeDataTranslate} from "../utils/util.js";
import {nextTick, reactive, ref, watch} from "vue";
import http from "../utils/request.js";
import {message} from "../utils/commonScript.js";


const filterText = ref('')
const visibleTree = ref(false)
const dataList = ref([])
const showName = ref('')
const expandedKeys = ref(null)
const defaultProps = reactive({
  children: 'children',
  label: 'name'
})
const treeRef = ref()
const props = defineProps({
  modelValue: [Number, String],
  parentName: String,
  placeholder: String
})
const emit = defineEmits(['input', 'update:parentNam'])
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
watch(props.parentName, (val) => {
  showName.value = val
})

const treeDialog = () => {
  expandedKeys.value = null
  treeRef.value.setCurrentKey(null)
  visibleTree.value = true
  getDataList(props.modelValue)
}
const filterNode = (value, data) => {
  if (!value) return true
  return data.name.indexOf(value) !== -1
}
const getDataList = (id) => {
  return http.get('/sys/region/tree').then(({ data: res }) => {
    if (res.code !== 0) {
      return message.error(res.msg)
    }
    dataList.value = treeDataTranslate(res.data)
    nextTick(() => {
      treeRef.value.setCurrentKey(id)
      expandedKeys.value = [id]
    })
  }).catch(() => {})
}
const cancelHandle = () => {
  visibleTree.value = false
  dataList.value = []
  filterText.value = ''
}
const clearHandle = () => {
  emit('input', '0')
  emit('update:parentName', '')
  showName.value = ''
  visibleTree.value = false
  dataList.value = []
  filterText.value = ''
}
const commitHandle = () => {
  const node = treeRef.value.getCurrentNode()
  if (!node) {
    message.error('请选择')
    return
  }
  emit('input', node.id)
  emit('update:parentName', node.name)
  showName.value = node.name
  visibleTree.value = false
  dataList.value = []
  filterText.value = ''
}
</script>
